<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .small {
            width: 400px;
            height: 400px;
            position: relative;
            border: 4px solid #ddd;
            box-shadow: 0 0 5px rgba(0, 0, 0, .5);
        }

        .container {
            width: 400px;
            height: 400px;
            position: relative;
            margin-left: 200px;
            margin-top: 100px;
        }

        .small img {
            width: 100%;
            height: 100%;
        }

        .small .wrap {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 999;
        }

        .small .grayBox {
            display: none;
            width: 100px;
            height: 100px;
            background-size: 400px 400px;
            background-position: 0 0;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 0;
            top: 0;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            left: 700px;
            top: 100px;
            border: 1px solid #f10;
            display: none;
            overflow: hidden;
        }

        .big img {
            position: absolute;
            width: 1600px;
            height: 1600px;

        }

        .choice-btn {
            position: absolute;
            bottom: -112px;
            width: 100%;
        }

        .choice-btn img {
            width: 100px;
            height: 100px;
            border: 2px solid #fff;
        }

        .choice-btn img:hover {
            border-color: #000;
        }
    </style>
</head>

<body>
    <!-- 左侧放大镜容器 -->
    <div class="container">
        <div class="small">
            <!-- 贴膜 -->
            <div class="wrap"></div>
            <!-- 左侧放大镜图片 -->
            <img src="images/timg.jpg" alt="">
            <!-- 小盒子 -->
            <span class="grayBox"></span>
        </div>
        <div class="choice-btn">
            <img src="images/timg.jpg" alt="">
            <img src="https://img.zcool.cn/community/01f9d55efda3d5a8012066216f132c.jpg@260w_195h_1c_1e_1o_100sh.jpg"
                alt="">
        </div>

    </div>

    <!-- 大图容器 -->
    <div class="big">
        <!-- 大图图片 -->
        <img src="images/timg.jpg" alt="">
    </div>
</body>

</html>
<script>
    function Mangeifier() {
        //正方形的容器
        this.square = document.querySelector('.grayBox')
        //小盒子的容器
        this.small = document.querySelector('.small')
        this.small_img = document.querySelector('.small img')
        //小盒子里面的图片
        //大盒子容器
        this.big = document.querySelector('.big')
        //大盒子里的图片
        this.big_img = document.querySelector('.big img')
        //找到按钮
        this.index = 0
        this.btns = document.querySelectorAll('.choice-btn img')
        //镜子的大小
        this.square_size = {
            width: parseInt(getComputedStyle(this.square).width),
            height: parseInt(getComputedStyle(this.square).height),
        }
        //小盒子的大小
        this.small_size = {
            width: parseInt(getComputedStyle(this.small).width),
            height: parseInt(getComputedStyle(this.small).height),
        }
        //装大图片的盒子的大小
        this.big_size = {
            width: parseInt(getComputedStyle(this.big).width),
            height: parseInt(getComputedStyle(this.big).height),
        }
        //装大图片大小
        this.big_img_size = {
            width: parseInt(getComputedStyle(this.big_img).width),
            height: parseInt(getComputedStyle(this.big_img).height),
        }
        //绑定函数
        this.bindEvent()
    }
    Mangeifier.prototype.bindEvent = function () {
        //dom元素this
        var self = this
        //元素显示隐藏
        this.small.onmouseover = function () {
            self.square.style.display = 'block'
            self.big.style.display = 'block'

        }
        this.small.onmouseout = function () {
            self.square.style.display = 'none'
            self.big.style.display = 'none'
        }
        this.small.onmousemove = function (e) {
            var e = e || event
            var x = e.offsetX - 50
            var y = e.offsetY - 50

            if (x < 0) {
                x = 0
            }
            var max_left = self.small_size.width - self.square_size.width - 8

            if (x > max_left) {
                x = max_left + 'px'
            }
            if (y < 0) {
                y = 0
            }
            var max_top = self.small_size.height - self.square_size.height - 8

            if (y > max_top) {
                y = max_top + 'px'
            }
            self.square.style.left = x + 'px'
            self.square.style.top = y + 'px'
            //位移的百分比
            var pa_left = (x / max_left).toFixed(2)
            var pa_top = (y / max_top).toFixed(2)
            // console.log(pa_left,pa_top);
            //大盒子的最大左边移动距离
            var big_box_max_left = self.big_img_size.width - self.big_size.width
            var big_box_max_top = self.big_img_size.height - self.big_size.height

            //计算距离
            self.big_img.style.left = -big_box_max_left * pa_left + 'px'
            self.big_img.style.top = -big_box_max_top * pa_top + 'px'

        }
        for (var i = 0; i < self.btns.length; i++) {
            self.btns[i].index=i
            self.btns[i].onmouseover = function () {
                self.index=this.index
                //小盒子里面的图片
                self.small_img.src=this.src
               //大盒子里面的图片
                self.big_img.src=this.src

            }

        }

    }
    var res = new Mangeifier()
</script>